<template>
  <el-container class="index-container" v-loading="!userInfo">
    <el-header class="index-header">
      <!-- 左侧盒子 -->
      <div class="left-box">
        <!-- 字体图标 -->
        <i class="el-icon-s-fold" @click="changeAside"></i>
        <!-- 图片 -->
        <img src="../../assets/index-logo.png" alt="" />
        <!-- 文字 -->
        <span>黑马面面</span>
      </div>
      <!-- 右侧盒子 -->
      <div class="right-box">
        <!-- <img src="../../assets/monkey.png" alt="" /> -->
        <img :src="userAvatar" alt="" />
        <!-- 第一次读取没有为undefined,所以不能获取,如果有userinfo才读取 -->
        <span class="my-span">你好,{{ userInfo && userInfo.username }}</span>
        <el-button type="primary" size="mini" @click="open">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto" class="Aside-box">
        <!-- 导航组件 -->
        <el-menu
          :default-active="routerSelect"
          class="el-menu-vertical-demo"
          router
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/index/chart">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据概览</span>
          </el-menu-item>
          <el-menu-item index="/index/user">
            <i class="el-icon-user"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/index/question">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">题库列表</span>
          </el-menu-item>
          <el-menu-item index="/index/company">
            <i class="el-icon-office-building"></i>
            <span slot="title">企业列表</span>
          </el-menu-item>
          <el-menu-item index="/index/subject">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">学科列表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主体部分 -->
      <el-main class="Main-box">
        <router-view> </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入接口
import { getUserInfo } from '@/api/index'
// 导入移除token方法
import { removeToken, getToken } from '@/utils/token'
export default {
  data () {
    return {
      // 是否展开
      isCollapse: false,
      // 选中的高亮
      routerSelect: this.$route.path,
      // 用户信息
      userInfo: undefined
    }
  },
  created () {
    // 判断用户是否携带token
    if (!getToken()) {
      this.$message.error('请先登录')
      this.$router.push('/login')
      return
    }
    // 渲染用户信息
    getUserInfo()
      // 到了then中的都是判断好的,直接调用数据
      .then(res => {
        // if (res.data.code === 200) {
        // 将用户信息设置给userInfo
        this.userInfo = res.data.data
        // } else if (res.data.code === 206) {
        //   setTimeout(() => {
        //     // token错误
        //     removeToken()
        //     this.$message.error('必须先登录')
        //     // this.$router.push('/login')
        //   }, 1000)
        // }
      })
      .catch(err => {
        console.log(err)
      })
  },
  computed: {
    userAvatar () {
      // 请求数据为异步操作,如果没有需要返回一个空值防止报错
      if (this.userInfo) {
        return process.env.VUE_APP_BaseURL + '/' + this.userInfo.avatar
      }
      return ''
    }
  },
  methods: {
    // 修改对话框状态
    changeAside () {
      this.isCollapse = !this.isCollapse
    },
    // 退出弹框
    open () {
      this.$confirm('是否要退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 移除token
          removeToken()
          // 跳转到登录页
          this.$router.push('/login')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less">
.index-container {
  height: 100vh;
  .index-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid black;
    .left-box {
      display: flex;
      align-items: center;
      i {
        margin-right: 16px;
        font-size: 30px;
      }
      img {
        margin-right: 10px;
      }
      span {
        color: #49a1ff;
        font-size: 24px;
      }
    }
    .right-box {
      display: flex;
      align-items: center;
      img {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .my-span {
        font-size: 18px;
        margin-right: 10px;
      }
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .Aside-box {
    .el-menu {
      height: 100%;
    }
  }
  .Main-box {
    background-color: #e8e9ec;
  }
}
</style>
